<template>
  <div>
    {{ pid }}-{{ cid }}
    <el-select v-model="pid" @change="queryCity">
      <el-option :value="-1" label="请选择省"></el-option>
      <el-option
        v-for="d in plist"
        :value="d.pid"
        :label="d.province"
      ></el-option>
    </el-select>
    <!-- {{ plist }} -->

    <el-select v-model="cid">
      <el-option :value="-1" label="请选择市"></el-option>
      <el-option v-for="d in clist" :value="d.cid" :label="d.city"></el-option>
    </el-select>

    <!-- {{ clist }} -->
  </div>

  <div>
    {{ dept.deptName }} - {{ emp.employeeName }}
    <el-select @change="queryEmployee" v-model="dept" value-key="deptId">
      <el-option v-for="d in dlist" :value="d" :label="d.deptName"></el-option>
    </el-select>

    <el-table :data="elist">
      <el-table-column prop="employeeId" label="员工编号"></el-table-column>
      <el-table-column prop="employeeName" label="员工姓名"></el-table-column>
      <el-table-column prop="phone" label="员工电话"></el-table-column>
      <el-table-column label="信息修改时间">
        <template #default="scope">
          {{ scope.row.lastupdate }}
        </template>
      </el-table-column>
    </el-table>

    <!-- {{ elist }} -->
    <div>
      {{ plid.lname }}-{{ lcid.cname }}
      <el-select @change="querylcid" v-model="plid" value-key="plid">
        <el-option v-for="d in pllist" :value="d" :label="d.lname"></el-option>
      </el-select>

      <el-table :data="lclist">
        <el-table-column prop="lcid" label="课程编号"></el-table-column>
        <el-table-column prop="cname" label="课程名称"></el-table-column>
        <el-table-column prop="cinfo" label="课程信息"></el-table-column>
        <el-table-column label="信息修改时间">
          <template #default="scope">
            {{ scope.row.lastupdate }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Api } from '../../script/Api';
import { ElMessage } from 'element-plus';

//#region 省份尘世联动
const pid = ref(-1);
const plist = ref([]);

const queryProvince = () => {
  Api.get('/link/provinces', {}, (data) => {
    if (data.success) {
      plist.value = data.data;
    } else {
      ElMessage.error(data.message);
    }
  });
};

const cid = ref(-1);
const clist = ref([]);

const queryCity = () => {
  if (pid.value == -1) {
    clist.value = [];
    cid.value = -1;
    return;
  }
  cid.value = -1;
  Api.get(`/link/cities/${pid.value}`, {}, (data) => {
    if (data.success) {
      clist.value = data.data;
    } else {
      ElMessage.error(data.message);
    }
  });
};
queryProvince();
//#endregion

//#region 部门员工联动
const dept = ref({});
const dlist = ref([]);
const emp = ref({});
const elist = ref([]);

const queryDept = () => {
  Api.get('/link/departments', {}, (data) => {
    if (data.success) {
      dlist.value = data.data;
      // 默认选中第一个
      dept.value = dlist.value[0];
      queryEmployee();
      return;
    }
    ElMessage.error(data.message);
  });
};

const queryEmployee = () => {
  Api.get(`/link/employees/${dept.value.deptId}`, {}, (data) => {
    if (data.success) {
      elist.value = data.data;
      emp.value = elist.value[0];
      return;
    }
    ElMessage.error(data.message);
  });
};

queryDept();

//#endregion

//#region  编程·课程
const plid = ref({});
const pllist = ref([]);
const lcid = ref({});
const lclist = ref([]);
    
const queryplid = () => {
  Api.get('/link/languages', {}, (data) => {
    if (data.success) {
      pllist.value = data.data;
      plid.value = pllist.value[0];
      querylcid();
      return;
    }
    ElMessage.error(data.message);
  });
};

const querylcid = () => {
  Api.get(`/link/cource/${plid.value.plid}`, {}, (data) => {
    if (data.success) {
      lclist.value = data.data;
      lcid.value = lclist.value[0];
      return;
    }
    ElMessage.error(data.message);
  });
};

queryplid();
//#endregion
</script>
<style scoped></style>
<!-- 作业是完成全部的联动，每一个联动都有两总呈现方式-->
